<template>
    <div class="calibration-tips" v-show="CalibrationComponent.Default.ShowTips.value">
        <div class="tips-container">
            <div class="content">
                <div class="header">
                    <span>标定说明</span>
                    <span class="material-icons"
                        @click="CalibrationComponent.Default.ShowTips.value = false">cancel</span>
                </div>
                <div ref="container" class="img-container">
                    <!-- <img v-for="tip of CalibrationComponent.Default.Tips" :key="tip"
                        :src="`/static/InertialNavigation/${tip}`"> -->
                </div>
                <div class="button-container">
                    <button class="reset" type="button" @click="OnNavigateTo(-1)"
                        v-show="canNavigateToPrevious"></button>
                    <button class="reset" type="button" @click="OnNavigateTo(1)" v-show="canNavigateToNext"></button>
                </div>
                <div class="indicator-container">
                    <span v-for="(tip, key) of CalibrationComponent.Default.Tips" :key="tip"
                        :indicator="IsIndicator(key)" @click="OnJumpTo(key)">
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
import { CalibrationComponent } from './InertialNavigationComponent';

const index = ref(0);

const container: Ref<HTMLDivElement | null> = ref(null);

const canNavigateToPrevious = computed(() => {
    return index.value > 0;
});

const canNavigateToNext = computed(() => {
    return index.value < CalibrationComponent.Default.Tips.length - 1;
});

function OnNavigateTo(delta: number): void {
    const imgs = Array.from(container.value?.children ?? []).filter(element => element.tagName == 'IMG') as Array<HTMLImageElement>;

    index.value = index.value + delta;
    if (index.value > -1 && index.value < CalibrationComponent.Default.Tips.length) {
        imgs[index.value].scrollIntoView();
    }
}

function IsIndicator(key: number): boolean {
    return index.value == key;
}

function OnJumpTo(key: number): void {
    const imgs = Array.from(container.value?.children ?? []).filter(element => element.tagName == 'IMG') as Array<HTMLImageElement>;
    imgs[key].scrollIntoView();
    index.value = key;
}

function OnEscape(event: KeyboardEvent): void {
    if (event.key == 'Escape') {
        CalibrationComponent.Default.ShowTips.value = false
    }
}

onMounted(() => document.addEventListener('keyup', OnEscape));
onUnmounted(() => document.removeEventListener('keyup', OnEscape));
</script>

<style scoped>
.calibration-tips {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    pointer-events: none;
}

.install-tips>button {
    position: absolute;
    right: 6rem;
    bottom: 2rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;

    pointer-events: initial;
}

.install-tips>button>span {
    color: #B1B1D4;
    font-size: 1.8rem;
    font-weight: 500;
}

.tips-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(1rem);

    pointer-events: initial;
}

.content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 124rem;
    height: 80rem;

    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.header {
    position: absolute;

    width: 100%;

    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header>span:first-of-type {
    color: white;
    font-size: 2.4rem;
    font-weight: 500;
}

.header>.material-icons {
    color: #81859C;
    font-size: 3.6rem;
}

.img-container {
    margin: 7.4rem;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    overflow: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.img-container>img {
    position: relative;

    width: 108rem;
    height: 64rem;

    scroll-snap-align: start;
}

.button-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 2rem;

    pointer-events: none;
}

.button-container>button {
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;

    pointer-events: initial;
}

.button-container>button:first-of-type {
    /* background-image: url('/static/InertialNavigation/ic_previous_2.png'); */
}

.button-container>button:first-of-type:hover {
    /* background-image: url('/static/InertialNavigation/ic_previous_2_hover.png'); */
}

.button-container>button:last-of-type {
    position: absolute;
    right: 2rem;
    /* background-image: url('/static/InertialNavigation/ic_next_2.png'); */
}

.button-container>button:last-of-type:hover {
    /* background-image: url('/static/InertialNavigation/ic_next_2_hover.png'); */
}

.indicator-container {
    position: absolute;
    bottom: 2rem;

    width: 100%;

    pointer-events: none;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.indicator-container>span {
    display: block;
    width: 1rem;
    height: 0.4rem;

    background-color: #81859C;

    border-radius: 0.2rem;

    transition: all 300ms;

    pointer-events: initial;

    cursor: pointer;
}

.indicator-container>span[indicator=true] {
    width: 2rem;
    background-color: #A2A2FF;
}
</style>